<template>
  <j-page title="捷印" back-text="返回" ref="page" :isBack="false">
    <!-- <view class="content">
      <view class="modules">
        <view class="module" @tap="$Router.push('/pages/print/upload-print')">
          <view class="module_title">打印</view>
          <image class="module_image" src="/static/print.png"></image>
        </view>
        <view class="module">
          <view class="module_title">工具箱</view>
          <image class="module_image" src="/static/tools.png"></image>
        </view>
      </view>
    </view> -->
	<view class="content">
		<view>
      <view class="tab" @tap="$Router.push('/pages/print/upload-print')" style="box-shadow: 2px 2px 10px #06c;">
        <image class="logo" src="/static/image/打印.png"></image>
      </view>
      <view class="title title_print">
        打印
      </view>
    </view>
    <view>
      <view class="tab" style="box-shadow: 2px 2px 10px #F0AD4E;">
        <image class="logo" src="/static/image/门店.png"></image>
      </view>
      <view class="title title_md">
        线下门店
      </view>
    </view>
    <view>
      <view class="tab" style="box-shadow: 2px 2px 10px #4CD964;">
        <image class="logo" src="/static/image/工具.png"></image>
      </view>
      <view class="title title_tool">
        工具箱
      </view>
    </view>
<!--		<navigator url="list">
			<view class="tab" style="box-shadow: 2px 2px 10px #F0AD4E;">
				<image class="logo" src="/static/image/门店.png"></image>
				<view class="title title_md">
					线下门店
				</view>
			</view>
		</navigator>
		<view class="tab" style="box-shadow: 2px 2px 10px #4CD964;">
			<image class="logo" src="/static/image/工具.png"></image>
			<view class="title title_tool">
				工具箱
			</view>
		</view>-->
	</view>
  </j-page>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello'
    }
  },
  created() {

  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
/* .content {
  width: 100%;
  & .modules{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    & .module{
      position: relative;
      height: 300rpx;
      width: 80%;
      margin: 40rpx;
      border-radius: 40rpx;
      overflow: hidden;
      &:active{
        opacity: 0.7;
      }

      &:nth-child(1){
        background-image: linear-gradient(45deg,#4facfe,#00f2fe);
      }

      &:nth-child(2){
        background-image: linear-gradient(45deg,#f6d365,#fda085);
      }

      &_title{
        font-size: 60rpx;
        color: #FFFFFF;
        margin: 10rpx 0 0 30rpx;
      }

      &_image{
        top: 0rpx;
        left: 160rpx;
        position: absolute;
      }
    }
  }
} */
.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 120rpx;
		width: 120rpx;

	}

	.tab {
		margin-top: 40rpx;
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;
		background-color: #F1F1F1;
    display: flex;
    justify-content: center;
    align-items: center;
	}

	.title {
    margin-top: 20rpx;
		text-align: center;
		font-family: 'Courier New', Courier, monospace;
		font-size: 50rpx;

		&_print {
			color: #0066CC;
		}

		&_md {
			color: #F0AD4E;
		}

		&_tool {
			color: #4CD964;
		}
	}
</style>
